<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>余磊</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        text-align: center;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    .nav{
        width: 100%;
        height: 100%;
    }
   
    .nav li{
        width: 20%;
        height: 74px;
        float: left;
    }
    .nav li img{
        width: 40px;
    }
    .nav li span{
        display: block;
        color: #666;
        font-size: 14px;
    }
    .swiper-slide img{
      width: 100%;
    }

    body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}




.open{
  width: 100%;
  height: 45px;
  background-color: #333;
  color: #fff;
  display: flex;
}
.open li{
  display: flex;
  justify-content: center;
  align-items: center;
}
.open li:nth-child(1){
  flex:8%;
} 
.open li:nth-child(1) img{
  width: 10px;
} 
.open li:nth-child(2){
  flex:10%;
} 
.open li:nth-child(2) img{
  width: 30px;
} 
.open li:nth-child(3){
  flex:57%;
} 
.open li:nth-child(4){
  flex:25%;
  background-color: #f63515;
} 
.search-wrapper{
  width: 100%;
  height: 44px;
  background-color: #c82519;
  color: #fff;
  display: flex;
  align-items: center;
}
.btn,.login{
  width: 40px;
  height: 44px;
}
.btn span{
  margin: 14px 0 0 15px;
width: 20px;
height: 18px;
display: block;
background: url("image/btn.png") no-repeat;
background-size: 100% 100%;
}

.search{
  flex: 1;
  height: 30px;
  background-color: #fff;
  border-radius: 15px;
 
}
.login{
  display:flex;
  justify-content: center;
  align-items: center;
}
.jd{
width: 20px;
height: 15px;
background: url("image/jd2.png")  no-repeat;
background-size: 20px 15px;
margin: 8px 8px 0 15px;
position: relative;
z-index: 1;
float: left;
}
.jd::after{
  content: "";
  height: 17px;
  width: 1px;
  display: block;
  background-color: rgb(160, 160, 160);
  position: absolute;
  left: 32px;
}
.sousuo{
display: block;
width: 18px;
height: 15px;
background: url("image/jd-sprites.png") no-repeat;
background-position: -80px 0;
background-size: 200px;
margin: 8px 0 0 15px;
position: relative;
z-index: 1;
float: left;
}

.footer{
  width: 100%;
  height: 54px;
  display: flex;
  position: fixed;
  bottom: 0;
  background-color: #fff;
}
.footer li{
        flex: 20%;
        text-align: center;
    }
    .footer li img{
      width: 64px;
    }
</style>

<link rel="stylesheet" href="./swiper.min.css">
<body>
    <div>
        <ul class="open">
          <li><img src="image/close.png"></li>
          <li><img src="image/jd.png"></li>
          <li>打开京东App，购物更轻松</li>
          <li>立即打开</li>
        </ul>
      </div>
    
    
      <div class="search-wrapper">
        <div class="btn"><span></span></div>
        <div class="search">
          <span class="jd"></span>
          <span class="sousuo"></span>
        </div>
        <div class="login">登录</div>
      </div>
      
      <ul>
        <ul class="footer">
          <li><a href="javascript"><img src="./image/bottom1.png" alt="首页"></a></li>
          <li><a href="javascript"><img src="./image/bottom2.png" alt="分类"></a></li>
          <li><a href="javascript"><img src="./image/bottom3.png" alt="京喜"></a></li>
          <li><a href="javascript"><img src="./image/bottom4.png" alt="购物车"></a></li>
          <li><a href="javascript"><img src="./image/bottom5.png" alt="未登录"></a></li>
      </ul>
    
    <box>
      <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><a href="javascript"><img src="./image/lb1.dpg" alt="京东超市"></a></div>
            <div class="swiper-slide"><a href="javascript"><img src="./image/lb2.dpg" alt="数码电器"></a></div>
            <div class="swiper-slide"><a href="javascript"><img src="./image/lb1.dpg" alt="京东服饰"></a></div>
            <div class="swiper-slide"><a href="javascript"><img src="./image/lb2.dpg" alt="京东生鲜"></a></div>
            </div>
    </box>
      <box>
        <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <ul class="nav">
                <li><a href="javascript"><img src="./image/1.png" alt="京东超市"><span>京东超市</span></a></li>
                <li><a href="javascript"><img src="./image/2.png" alt="数码电器"><span>数码电器</span></a></li>
                <li><a href="javascript"><img src="./image/3.png" alt="京东服饰"><span>京东服饰</span></a></li>
                <li><a href="javascript"><img src="./image/4.png" alt="京东生鲜"><span>京东生鲜</span></a></li>
                <li><a href="javascript"><img src="./image/5.png" alt="京东到家"><span>京东到家</span></a></li>
                <li><a href="javascript"><img src="./image/6.png" alt="充值缴费"><span>充值缴费</span></a></li>
                <li><a href="javascript"><img src="./image/7.png" alt="9.9元拼"><span>9.9元拼</span></a></li>
                <li><a href="javascript"><img src="./image/8.png" alt="领券"><span>领券</span></a></li>
                <li><a href="javascript"><img src="./image/9.png" alt="借钱"><span>借钱</span></a></li>
                <li><a href="javascript"><img src="./image/10.png" alt="PLUS会员"><span>PLUS会员</span></a></li>
                </ul>
            </div>
              <div class="swiper-slide">
                <ul class="nav">
                <li><a href="javascript"><img src="./image/11.png" alt="京东超市"><span>京东超市</span></a></li>
                <li><a href="javascript"><img src="./image/12.png" alt="数码电器"><span>数码电器</span></a></li>
                <li><a href="javascript"><img src="./image/13.png" alt="京东服饰"><span>京东服饰</span></a></li>
                <li><a href="javascript"><img src="./image/14.png" alt="京东生鲜"><span>京东生鲜</span></a></li>
                <li><a href="javascript"><img src="./image/15.png" alt="京东到家"><span>京东到家</span></a></li>
                <li><a href="javascript"><img src="./image/16.png" alt="充值缴费"><span>充值缴费</span></a></li>
                <li><a href="javascript"><img src="./image/17.png" alt="9.9元拼"><span>9.9元拼</span></a></li>
                <li><a href="javascript"><img src="./image/18.png" alt="领券"><span>领券</span></a></li>
                <li><a href="javascript"><img src="./image/19.png" alt="借钱"><span>借钱</span></a></li>
                <li><a href="javascript"><img src="./image/20.png" alt="PLUS会员"><span>PLUS会员</span></a></li>
                </ul>
              </div>
              
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </box>
    
          <script src="./swiper.min.js"></script>
          <script>
            var swiper = new Swiper('.swiper-container', {
              pagination: {
                el: '.swiper-pagination',
              },
            });
          </script>
</body>
</html>